<template>
	<div id='Table' ref='TableRef'>
			<el-table
			    :data="tableData"
			    style="width: 100%"
			    :border='border'
			    :stripe='stripe'
			    element-loading-text="数据加载中"
			    element-loading-spinner="el-icon-loading"
			    element-loading-background="rgba(255, 255, 255, 0.8)"
			    :height='$store.state.tableHeight'
			    :max-height="maxHeight"
			    :header-row-class-name = 'tableHeaderClassName'
			    header-cell-class-name = 'table_header_list_item'
			    :row-style = 'rowStyleObj'
			    :row-class-name="tableRowClassName"
			    empty-text='暂无数据'
			    tooltip-effect='light'
			    cell-class-name='table_cell_class'
			    @selection-change="selectionChange"
			    >
			   	<el-table-column
			   	  v-if='selectionRadio'
			   	  :selectable='selectable'
			      type="selection"
			      align='center'
			      label-class-name='selection_class'
			    width="20">
			    </el-table-column>
				<slot></slot>
			</el-table>
		
	</div>
</template>

<script>
	import eventBus from "@/plugins/bus.js";
	export default{
		name:'Table',
		props: {
			tableData: {
				default:function(){
					return []
				},
			},
			border:{default:true,},
			stripe:{default:true,},
			selectionRadio:{default:false,},
			maxHeight: {default: 999999},
			selectableFun: {default: ''},
		},
		components:{
			
		},
		data(){
			return {
				//table_header_class
				tableHeaderClassName:'table_header_class',
				rowStyleObj:{
					color:'#211e1e',
					fontSize:"12px"
				}
			}
		},
		created() {
			eventBus.$on('setTableHeight', (height) => {
				this.$store.commit('getTableHeight',{height:height>350?height:350}); 
		    })
		},
		watch: {
			
		},
		computed: {
			
		},
		mounted(){
			
		},
		methods:{
			selectable(row, index){
				if(this.selectableFun){
					return this.selectableFun(row, index);
				}
			},
			tableRowClassName({row, rowIndex}) {
		        if (rowIndex === 0) {
		          return 'warning-row';
		        } else if (rowIndex === 3) {
		          return 'success-row';
		        }
		        return '';
		    },
			rowStyleFun(row,rowIndex){
				console.log(row);
				console.log(rowIndex)
			},
			selectionChange(val) {
		        this.$emit('selectionChange',val)
		    }
		}
	}
</script>

<style lang="scss">
	@import './Table.scss';
</style>